<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="flexbox flexcenter flexbetween meta_head">
            <div class="flexbox flexcenter">
                <img src="../../assets/img/video_icon.svg" alt="">
                <span class="video_name">{{info.material_name}}</span>
            </div>
            <!-- <div class="icon_btn icon_btn_32" @click="$router.go(-1)"><img src="../../assets/img/close_check.svg" alt=""></div> -->
        </div>
        <div class="meta_down">
            <el-button plain icon="el-icon-download" class="el-button-width" :class="{'active':type==1}" @click="seletType(1)" size="small">无水印</el-button>
            <el-button v-if="material_logo!==null" plain icon="el-icon-download" class="el-button-width" :class="{'active':type==2}" @click="seletType(2)" size="small">有水印</el-button>
        </div>
        <div class="flex flexbox flexcenter video_content">
            <video id="media" :src="videoUrl" preload controls width="100%" height="100%"></video>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            type:1,
            loading:false,
            videoUrl:'',
            null_logo:"",
            material_logo:"",
            info:{}
        };
    },
    created() {
        this.getDetails()
    },
    methods: {
        //获取列表
        async getDetails() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/clipFind",
                {
                    id:this.$route.query.id
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.info = res.data
                this.videoUrl = res.data.material;
                this.null_logo = res.data.material;
                this.material_logo = res.data.material_logo
            }
        },

        seletType(index){
            this.type = index
            if(index==1){
                this.videoUrl = this.null_logo
            }else{
                this.videoUrl = this.material_logo
            }
        },
        
    },
    components: {},
};
</script>


<style scoped>
.meta_head {
    height: 71px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}
.video_name {
    font-size: 16px;
    color: #17233d;
    margin: 0 20px;
}
.meta_down {
    padding: 20px;
}
.video_content {
    border-radius: 4px;
    background-color: #25282c;
    height: 100%;
    margin: 0 20px 20px;
    overflow: hidden;
}
.el-button-width.active{
    background: #fff;
    border-color: #4475ff;
    color: #4475ff;
}
</style>

